<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title="人员列表"
      width="70%"
      @close="handleCancel"
    >
      <div style="display: flex; justify-content: space-between">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item label="班组" prop="team">
            <el-select
              style="width: 100%"
              v-model="queryParams.team"
              placeholder="请选择"
            >
              <el-option
                v-for="item in ems_team"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="员工编号" prop="code">
                  <el-input v-model="queryParams.code" placeholder="请输入员工编号" @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item label="员工名称" prop="name">
                  <el-input v-model="queryParams.name" placeholder="请输入员工名称" @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item label="手机号码" prop="telephone">
                  <el-input v-model="queryParams.telephone" placeholder="请输入员工手机号码" @keyup.enter="handleQuery" />
              </el-form-item> -->
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-button
          style="margin-bottom: 5px"
          type="primary"
          plain
          @click="handleSubmit"
          :disabled="multiple"
        >
          确认
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="userList"
        ref="people"
        row-key="id"
        stripe
        border
        style="cursor: pointer"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          align="center"
          width="55"
        />
        <el-table-column label="序号" width="60" type="index" align="center" />
        <el-table-column prop="team" label="班组" align="center">
          <template #default="scope">
            <dict-tag :options="ems_team" :value="scope.row.team" />
          </template>
        </el-table-column>
        <el-table-column
          label="员工编号"
          align="center"
          prop="code"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="员工名称"
          align="center"
          prop="name"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="position" label="职位" align="center">
          <template #default="scope">
            <dict-tag
              :options="ems_machine_info_position"
              :value="scope.row.position"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="proportion"
          label="岗位占比"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="性别" align="center" prop="sex" :show-overflow-tooltip="true">
                  <template v-slot="{ row }">
                      {{ row.sex === 1 ? "男" : "女" }}
                  </template></el-table-column>
              <el-table-column label="联系电话" align="center" prop="telephone" :show-overflow-tooltip="true">
              </el-table-column> -->
      </el-table>
      <!-- <div class="footer">
                <pagination
                    v-show="total > 0"
                    :total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"
                />
            </div> -->
    </el-dialog>
  </div>
</template>
<script setup>
const emit = defineEmits(["changeUpdate"]);
import { getMesUserInfo } from "@/api/basicInfo/personnel";
const { proxy } = getCurrentInstance();
const { ems_machine_info_position, ems_team } = proxy.useDict(
  "ems_machine_info_position",
  "ems_team"
);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  search: {
    type: Object,
    default: () => {
      {
      }
    },
  },
  peopleSelectList: {
    type: Array,
    default: () => {
      [];
    },
  },
  userWorkList: {
    type: Array,
    default: () => {
      [];
    },
  },
});
const people = ref(null);
const multiple = ref(true);
const selectRow = ref([]);
const loading = ref(false);
const userList = ref([]);
const oldList = ref([]);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  // joinPositionStatus: 1,
  // code: undefined,
  // name: undefined,
  // telephone: undefined,
});
const total = ref(0);
watch(
  () => props.visible,
  (val) => {
    if (val) {
      userList.value = props.userWorkList;
      oldList.value = props.userWorkList;
      nextTick(() => {
        people.value.clearSelection();
        // if (props.peopleSelectList.length > 0) {
        //     props.peopleSelectList.forEach(item => {
        //         people.value.toggleRowSelection(item, true)
        //     })
        // }
      });
    }
  }
);

// 选中
const handleSelectionChange = (row) => {
  selectRow.value = row;
  multiple.value = !row.length;
};

const handleSubmit = () => {
  emit("changeUpdate", selectRow.value);
};

const handleCancel = () => {
  proxy.resetForm("queryRef");
  emit("cancel");
};
// const getList = async () => {
//   loading.value = true
//   if (props.search) {
//       queryParams.value = { ...queryParams.value, ...props.search }
//   }
//   const res = await getMesUserInfo(queryParams.value)
//   loading.value = false
//   userList.value = res.rows
//   total.value = res.total
// }
// 搜索
const handleQuery = () => {
  // queryParams.value.pageNum = 1
  if (queryParams.value.team) {
    userList.value = oldList.value.filter(
      (item) => item.team == queryParams.value.team
    );
  }
};
/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm("queryRef");
  userList.value = oldList.value;
  // handleQuery()
};
// getList()
</script>

<style lang="scss" scoped></style>
